<template>
	<div class="left-station-info">

		<Head title="投运设备状态">
			<template #content>
				<div class="basic-info-box">
					<div class="row-item one flex">
						<img src="@/assets/images/overStation/dianzhuang.png" alt="">
						<div class="row-item-pile">
							<div class="name">电桩（台）</div>
							<div class="num">{{ data.detailsInfo?.equipmentCount || 0 }}</div>
						</div>
					</div>
					<div class="row-item two">
						<div class="terminal-info flex">
							<img src="@/assets/images/overStation/zhongduan.png" alt="" class="zhongduan-img">
							<div class="row-item-pile">
								<div class="name">终端总数</div>
								<div class="num">{{ data.detailsInfo?.connectorCount || 0 }}</div>
							</div>
							<div class="terminal-status">
								<div class="status-item" v-for="item in terminalStatusIist" :key="item.id"
									:class="{'active-status-item': data.currentWorkStatus==item.id}"
									@click="handleStatusChange(item)">
									<span class="dot" :style="{'background': item.color}"></span>
									<span class="name">{{ item.name }}</span>
									<span class="number">{{ data.detailsInfo[item.number] }}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="all-pile-content" ref="plieContent" :style="{'height': carouselHeight}">
					<el-carousel v-if="carouselTotal>0" :autoplay="data.autoplay" :interval="5000" arrow="never"
						indicator-position="outside" :style="{'height': carouselHeight}" @change="carouselChange"
						class="carousel-box">
						<el-carousel-item v-for="pageItem in Math.ceil(carouselTotal / 9)" :key="pageItem"
							class="carousel-item">
							<!-- v-for="(item, index) in pileData.slice((pageItem -1) * 12, pageItem * 12)" -->
							<div class="row-pile" v-for="(item, index) in pileData" :key="index"
								@click="itemClick(item)">
								<div class="row-pile-title">{{ item.equipmentName }}--{{pageItem}}</div>
								<!-- 终端状态 0离线 1空闲 2占用（未充电）3占用（充电中）255故障 -->
								<div class="row-pile-info" v-if="item.workStatus=='3'">
									<div class="pile-left" style="display: flex;flex-wrap: wrap;">
										<div class="item flex chargingInfo">
											<div class="label">已充电量</div>
											<div class="value">{{ item.totalPower || '--' }} 度</div>
										</div>
										<div class="item flex chargingInfo">
											<div class="label" style="width: 60px;">电压</div>
											<div class="value">{{ item.voltage || '--' }}</div>
										</div>
										<div class="item flex chargingInfo">
											<div class="label">剩余时长</div>
											<div class="value">{{ item.leftTime || '0' }} 分钟</div>
										</div>
										<div class="item flex chargingInfo">
											<div class="label" style="width: 60px;">电流</div>
											<div class="value">{{ item.current || '--' }}</div>
										</div>
										<!-- <div class="item flex chargingInfo">
											<div class="label">枪线温度</div>
											<div class="value">{{ item.gunTemperature || '--' }}</div>
										</div> -->
										<div class="item item-type-box flex">
											<div class="zhi" v-if="item.type=='1'">直</div>
											<div class="jiao" v-else>交</div>
											<div class="zhi-value">{{ item.equipmentCode }}</div>
										</div>
									</div>
									<div class="pile-right">
										<div class="icon-box round" v-if="item.soc&&item.soc>0">
											{{ item.soc }}
											<span class="unit">%</span>
										</div>
										<div class="icon-box" v-else>
											<img class="chongdian-icon" src="@/assets/images/overStation/chongdian.png"
												alt="">
										</div>
										<div class="status-text">充电</div>
									</div>
								</div>

								<div class="row-pile-info" v-if="item.workStatus=='0'">
									<div class="pile-left">
										<div class="item flex">
											<div class="label">启停状态</div>
											<div class="value">{{ item.isEnableStart ? '启用' : '停用' }}</div>
										</div>
										<div class="item flex">
											<div class="label">离线时间</div>
											<div class="value">{{ item.statusUpdateTime || '--' }}</div>
										</div>
										<div class="item item-type-box flex">
											<div class="zhi" v-if="item.type=='1'">直</div>
											<div class="jiao" v-else>交</div>
											<div class="zhi-value">{{ item.equipmentCode }}</div>
										</div>
									</div>
									<div class="pile-right">
										<div class="icon-box">
											<img class="lixian-icon" src="@/assets/images/overStation/lixian.png"
												alt="">
										</div>
										<div class="status-text offline">离线</div>
									</div>
								</div>

								<div class="row-pile-info" v-if="item.workStatus=='255'">
									<div class="pile-left">
										<!-- <div class="item flex">
											<div class="label">启停状态</div>
											<div class="value">{{ item.isEnableStart ? '启用' : '停用' }}</div>
										</div> -->
										<div class="item flex">
											<div class="label">故障时间</div>
											<div class="value">{{ item.statusUpdateTime || '--' }}</div>
										</div>
										<div class="item flex">
											<div class="label">告警事项</div>
											<div class="value">{{ item.faultMsg || '--' }}</div>
										</div>
										<div class="item item-type-box flex">
											<div class="zhi" v-if="item.type=='1'">直</div>
											<div class="jiao" v-else>交</div>
											<div class="zhi-value">{{ item.equipmentCode }}</div>
										</div>
									</div>
									<div class="pile-right">
										<div class="icon-box">
											<img class="guzhang-icon" src="@/assets/images/overStation/guzhang.png"
												alt="">
										</div>
										<div class="status-text warning">故障</div>
									</div>
								</div>

								<div class="row-pile-info" v-if="item.workStatus=='1'">
									<div class="pile-left">
										<div class="item flex">
											<div class="label">启停状态</div>
											<div class="value">{{ item.isEnableStart ? '启用' : '停用' }}</div>
										</div>
										<div class="item flex">
											<div class="label">车位号</div>
											<div class="value">{{ item.parkNo || '--' }}</div>
										</div>
										<div class="item item-type-box flex">
											<div class="zhi" v-if="item.type=='1'">直</div>
											<div class="jiao" v-else>交</div>
											<div class="zhi-value">{{ item.equipmentCode }}</div>
										</div>
									</div>
									<div class="pile-right">
										<div class="icon-box">
											<img class="kongxian-icon" src="@/assets/images/overStation/kongxian.png"
												alt="">
										</div>
										<div class="status-text free">空闲</div>
									</div>
								</div>

								<div class="row-pile-info" v-if="item.workStatus=='2'">
									<div class="pile-left">
										<div class="item flex">
											<div class="label">占用用户</div>
											<div class="value">{{ item.accountNumber || '--' }}</div>
										</div>
										<div class="item flex">
											<div class="label">占用时长</div>
											<div class="value">{{ item.duration || '--' }} 分钟</div>
										</div>
										<div class="item item-type-box flex">
											<div class="zhi" v-if="item.type=='1'">直</div>
											<div class="jiao" v-else>交</div>
											<div class="zhi-value">{{ item.equipmentCode }}</div>
										</div>
									</div>
									<div class="pile-right">
										<div class="icon-box">
											<img class="zy-icon" src="@/assets/images/overStation/zhanyong.png" alt="">
										</div>
										<div class="status-text occupy">占用</div>
									</div>
								</div>

							</div>
						</el-carousel-item>
					</el-carousel>

					<div class="no-data-wrap" v-else>
						<div class="no-data"></div>
						<div class="text">暂无数据</div>
					</div>

				</div>
			</template>
		</Head>

		<el-dialog v-model="dialogVisible" :title="itemData.equipmentName" align-center>
			<template #header>
				<div class="dialogheader">
					{{itemData.equipmentName}}
				</div>
			</template>
			<div class="pile-Info">
				<div class="info-name">
					终端信息
				</div>
				<div class="info-view">
					<div class="info-item">
						终端编码：{{itemData.connectorCode || '--' }}
					</div>
					<div class="info-item">
						已充电量：{{itemData.totalPower || '--' }} 度
					</div>
					<div class="info-item">
						已充时长：{{itemData.chargedTime || '--' }} 分钟
					</div>
					<div class="info-item">
						剩余时长：{{itemData.leftTime || '--' }} 分钟
					</div>
					<div class="info-item">
						当前电压：{{itemData.voltage || '--' }} V
					</div>
					<div class="info-item">
						当前电流：{{itemData.current || '--' }} A
					</div>
					<div class="info-item">
						枪线温度：{{itemData.gunTemperature || '--' }} ℃
					</div>
				</div>

			</div>
			<div class="pile-Info">
				<div class="info-name" style="margin-top: 24px;">
					车辆信息
				</div>
				<div class="info-view">
					<div class="info-item">
						VIN：{{itemData.bmsInfo.vin || '--' }}
					</div>
					<div class="info-item">
						电池容量：{{itemData.bmsInfo.batterDegree || '--' }} 度
					</div>
					<div class="info-item">
						起始soc：{{itemData.initialSoc}} %
					</div>
					<div class="info-item">
						当前soc：{{itemData.soc || '--' }} %
					</div>
					<div class="info-item">
						电池温度：{{itemData.batteryTemperature || '--' }} ℃
					</div>
					<div class="info-item">
						电池类型：{{itemData.bmsInfo.batteryType==3?'磷酸铁锂': itemData.bmsInfo.batteryType==6?'三元锂':'其它' }}
					</div>
				</div>
			</div>

		</el-dialog>

	</div>
</template>
<script lang="ts" setup>
	import Head from "@/components/head/index.vue";
	import { ref, onMounted } from "vue";
	import { pageQueryRealTimeConnectorByStationId } from "@/service/apis/pile";

	interface Props {
		id : any;
	}
	const prop = withDefaults(defineProps<Props>(), {
		id: "",
	});

	const carouselHeight = ref("400px");
	const plieContent = ref();

	const terminalStatusIist : any = ref([
		{
			name: "充电",
			id: '3',
			number: "occupyChargingCount",
			color: "#5073F7",
		},
		{
			name: "空闲",
			id: '1',
			number: "freeCount",
			color: "#07C160",
		},
		{
			name: "占用",
			id: '2',
			number: "occupyUnchargedCount",
			color: "#FFC700",
		},
		{
			name: "离线",
			id: '0',
			number: "offLineCount",
			color: "rgba(0, 0, 0, 0.25)",
		},
		{
			name: "故障",
			id: '255',
			number: "faultCount",
			color: "#FA3939",
		},
	]);

	const data = reactive({
		detailsInfo: {} as any,
		pageNo: 1,
		pageSize: 9,
		currentWorkStatus: '',
		autoplay: true,
	});

	const pileData : any = ref([]);
	const carouselTotal = ref(0);

	// 投运设备状态
	const getData = (pageNo : number) => {
		let pages : any = {
			pageNo: pageNo,
			pageSize: data.pageSize,
		};
		pageQueryRealTimeConnectorByStationId(
			{
				stationId: prop.id,
				workStatus: data.currentWorkStatus
			},
			pages
		).then((res : any) => {
			if (res) {
				data.detailsInfo = res;
				pileData.value = res.connectorDTOPageInfo.list;
				carouselTotal.value = res.connectorDTOPageInfo.total;
			}
		});
	};

	// 轮播图切换
	const carouselChange = (val : any) => {
		getData(val + 1);
	};

	// 终端状态切换
	const handleStatusChange = (item : any) => {
		if (data.currentWorkStatus == item.id) {
			data.currentWorkStatus = ''
		} else {
			data.currentWorkStatus = item.id;
		}
		// console.log('item', item.name,'--', data.currentWorkStatus,'--');
		getData(1);
	}


	// 显示充电中终端信息
	const dialogVisible = ref(false);
	const itemData : any = ref({});
	const itemClick = (item : any) => {
		if (item.workStatus == 3 && item.bmsInfo) {
			itemData.value = item;
			dialogVisible.value = true;
			let initial = item.soc - (item.totalPower / item.bmsInfo.batterDegree * 100);
			let initialSoc = initial < 0 ? 0 : initial;
			itemData.value.initialSoc = Math.round(initialSoc);
		}
	}

	onMounted(() => {
		nextTick(() => {
			getData(1);
			let height =
				window.innerHeight - plieContent.value.offsetTop - 10 - 193 - 38 - 64;
			carouselHeight.value = height + "px";
		});
	});
</script>
<style lang="scss" scoped>
	.left-station-info {
		.flex {
			display: flex;
		}

		.basic-info-box {
			padding: 0px 33px 0 18px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.row-item {
				background: #f6f8ff;
				border-radius: 10px 10px 10px 10px;
				padding-top: 16px;
				box-sizing: border-box;

				&.one {
					width: 234px;
					height: 104px;
				}

				&.two {
					width: calc(100% - 246px);
					height: 104px;
				}

				img {
					width: 74px;
					height: 70px;
					margin-left: 16px;
				}

				&-pile {
					margin-left: 16px;

					.name {
						font-size: 16px;
						font-weight: 500;
						color: #555555;
						line-height: 22px;
						margin-left: 6px;
						margin-top: 4px;
					}

					.num {
						text-align: center;
						font-weight: bold;
						font-size: 25px;
						color: #000000;
						font-family: DIN Alternate, DIN Alternate;
						line-height: 22px;
						margin-top: 10px;
					}
				}

				.zhongduan-img {
					margin-left: 32px;
				}

				.terminal-status {
					font-weight: 500;
					font-size: 16px;
					color: #555555;
					line-height: 22px;
					width: 880px;
					margin-left: 64px;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.status-item {
						width: 150px;
						height: 35px;
						margin-right: 24px;
						cursor: pointer;
						line-height: 35px;
						align-items: center;
						display: flex;

						&.active-status-item {
							background: #f0f2f9;
							border-radius: 5px;
						}

						.dot {
							display: inline-block;
							width: 10px;
							height: 10px;
							border-radius: 50%;
						}

						.name {
							margin: 0 16px 0 6px;
						}
					}
				}
			}
		}

		.all-pile-content {
			padding: 0px 24px 0 18px;
			box-sizing: border-box;
			margin-top: 24px;

			.carousel-box {
				// height: 506px;
				// border: 1px solid red;
			}

			:deep(.el-carousel__container) {
				// height: 420px !important;
				height: 90% !important;
			}

			.carousel-item {
				width: 100%;
				display: flex;
				align-content: flex-start;
				flex-wrap: wrap;
				height: 90% !important;
				overflow-y: auto;
			}

			:deep(.el-carousel__button) {
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background-color: rgba(113, 141, 246, 0.55);
			}

			:deep(.el-carousel__indicator.is-active button) {
				background-color: #718df6;
			}

			.row-pile {
				// width: calc(25% - 10px);
				width: calc(33% - 10px);
				min-width: 250px;
				box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
				border-radius: 8px;
				position: relative;
				box-sizing: border-box;
				margin-bottom: 12px;
				// padding-bottom: 8px;
				// height: 126px;
				height: 146px;

				&:not(:nth-child(3n)) {
					margin-right: 10px;
				}

				&-title {
					background: #e5e8f0;
					font-weight: 500;
					font-size: 16px;
					color: #666666;
					height: 32px;
					line-height: 32px;
					padding: 0 8px;
				}

				&-info {
					padding: 10px 7px 0px;

					.pile-left {
						font-weight: 400;
						font-size: 16px;
						color: #555555;

						.chargingInfo {
							width: 46%;
							min-width: 130px;
						}

						.item-type-box {
							position: absolute;
							bottom: 0px;
							left: 18px;
						}

						.item {
							margin-bottom: 4px;
						}

						.label {
							width: 76px;
							text-align: right;
						}

						.value {
							margin-left: 10px;
							color: #262626;
						}

						.zhi {
							width: 24px;
							height: 24px;
							background: rgba(7, 193, 96, 0.7);
							border-radius: 6px;
							font-size: 14px;
							color: #ffffff;
							font-weight: 600;
							text-align: center;
							line-height: 24px;
							margin-right: 6px;
						}

						.jiao {
							width: 30px;
							height: 30px;
							background: rgba(152, 89, 255, 0.7);
							border-radius: 6px;
							font-size: 16px;
							color: #ffffff;
							font-weight: 600;
							text-align: center;
							line-height: 30px;
							margin-right: 6px;
						}

						.zhi-value {
							color: #858585;
						}
					}

					.pile-right {
						position: absolute;
						right: 28px;
						top: 42px;

						.round {
							width: 46px;
							height: 46px;
							border-radius: 50%;
							line-height: 46px;
							text-align: center;
							border: 4px solid #5073f7;
							font-family: DIN Alternate, DIN Alternate;
							font-weight: bold;
							font-size: 16px;
							color: #5073f7;

							.unit {
								font-size: 13px;
								font-weight: 700;
								line-height: 1;
							}
						}

						.chongdian-icon {
							width: 50px;
							height: 50px;
						}

						.lixian-icon {
							margin-top: 10px;
							width: 40px;
							height: 40px;
						}

						.guzhang-icon {
							margin-top: 12px;
							width: 40px;
							height: 36px;
						}

						.kongxian-icon {
							margin-top: 11px;
							width: 36px;
							height: 36px;
						}

						.zy-icon {
							margin-top: 10px;
							width: 40px;
							height: 40px;
						}

						.status-text {
							font-weight: 600;
							font-size: 15px;
							color: #5073f7;
							text-align: center;
							margin-top: 4px;

							&.offline {
								color: #b8babf;
							}

							&.warning {
								color: #fa3939;
							}

							&.free {
								color: #07c160;
							}

							&.occupy {
								color: #ffc700;
							}
						}
					}
				}
			}
		}
	}

	:deep(.el-dialog__header) {
		margin-right: 0px;
		background: #718df6;
	}

	.dialogheader {
		background: #718df6;
		font-size: 20px;
		font-weight: 600;
		color: #ffffff;
		margin: 0;
	}

	.pile-Info {
		.info-name {
			font-size: 20px;
			font-weight: 600;
			color: #5073f7;
			margin-bottom: 18px;
		}

		.info-view {
			display: flex;
			flex-wrap: wrap;

			.info-item {
				font-size: 16px;
				width: 50%;
				margin-bottom: 10px;
			}
		}
	}
</style>